Day 18 前端和後端

2023 iThome 鐵人賽

DAY 18

Software Development

菜鳥工程師30天學java基礎系列第 18 篇

15th鐵人賽

jimmychi

團隊SwiftUI 男孩

2023-10-03 08:06:55

633 瀏覽

分享至

前端

在軟體開發領域中，「前端」指的是使用者直接與之互動的部分。在網頁開發中，前端是指在瀏覽器中顯示給使用者看的部分，包括所有使用者可以看到、點擊和互動的元素。前端開發涉及使用HTML、CSS、JavaScript等技術來構建網頁和用戶界面。

HTML（超文本標記語言）：HTML 是一種標記語言，用於構建網頁結構。它定義了網頁的基本結構，例如標題、段落、列表等。開發人員使用HTML來描述網頁的內容。
CSS（層疊樣式表）：CSS 用於控制網頁的外觀和風格。它可以控制文字的顏色、字體、間距、背景顏色等，並且還能控制網頁布局和元素的位置。CSS使得開發人員可以對網頁進行美化和設計。
JavaScript：JavaScript 是一種用於實現網頁互動和動態效果的編程語言。它使得開發人員可以創建對用戶操作響應的互動式元素，例如表單驗證、動畫效果和實時更新。
前端開發人員通常需要深入了解這些技術，以確保他們所開發的網站或網頁應用程序在不同的瀏覽器和設備上具有一致的外觀和行為。他們可能會使用各種前端框架和庫（如React.js、Angular、Vue.js等），來簡化開發過程和提高效率。前端開發和後端開發（處理伺服器端邏輯的部分）密切配合，共同構建完整的網頁應用程序。

範例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .container {
            margin-top: 50px;
        }
        .button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        #output {
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>簡單的計算器</h1>
        <input type="number" id="num1" placeholder="輸入第一個數字">
        <input type="number" id="num2" placeholder="輸入第二個數字">
        <br><br>
        <button class="button" onclick="add()">相加</button>
        <button class="button" onclick="subtract()">相減</button>
        <button class="button" onclick="multiply()">相乘</button>
        <button class="button" onclick="divide()">相除</button>
        <div id="output"></div>
    </div>

    <script>
        function add() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("output").innerHTML = "結果： " + result;
        }

        function subtract() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 - num2;
            document.getElementById("output").innerHTML = "結果： " + result;
        }

        function multiply() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 * num2;
            document.getElementById("output").innerHTML = "結果： " + result;
        }

        function divide() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            if (num2 !== 0) {
                var result = num1 / num2;
                document.getElementById("output").innerHTML = "結果： " + result;
            } else {
                document.getElementById("output").innerHTML = "錯誤： 除數不能為零";
            }
        }
    </script>
</body>
</html>

結果 :